<template>
<div id="publish">
    <el-card>
        <div slot="header">
            <img src="/static/logo.jpg" alt="" style="width:100px;">
            <span>「问卷」</span>
            <b>{{paper.title}}</b>
        </div>
        <el-card v-for="(content,index) in paper.content" :key="'con'+content.id">
            <div slot="header">
                <span>{{index+1}}. {{content.text}}</span>
            </div>
            <el-radio v-for="item in items" :key="'item'+item.id" v-model="paper.content[index].answer" :label="item.id">
                {{item.text}}
            </el-radio>
        </el-card>
        <el-card>
            <div slot="header">
                <span>建议反馈</span>
            </div>
            <el-input v-model="note" placeholder="在此输入您的建议反馈" type="textarea"></el-input>
        </el-card>
        <el-button type="primary" @click="save">提交</el-button>

    </el-card>

</div>
</template>

<script>
export default {
    props: ['paper_id'],
    data() {
        return {
            paper: [],
            items: [],
            note: ""
        }
    },
    created() {
        this.getPaper()
    },
    methods: {
        save() {
            this.$http.post('/answer/add', this.$qs.stringify({
                paper_id: this.paper_id,
                content: JSON.stringify(this.paper.content),
                items: JSON.stringify(this.items),
                note: this.note
            })).then(result => {
                if (result.data.error == 0) {
                    this.$router.push('/thank');
                } else {
                    this.$message.error('您已经提交过了');
                }
            })
        },
        getPaper() {
            this.$http.get('/papers/publish', {
                params: {
                    paper_id: this.paper_id
                }
            }).then(result => {
                result.data.data.content = JSON.parse(result.data.data.content);
                this.paper = result.data.data;
                this.items = result.data.items
            })
        }
    }
}
</script>

<style>
.el-card {
    margin-bottom: 10px;
}
</style>
